<template>
    <div>
        <el-page-header @back="back" content="新建裂变活动">
        </el-page-header>
        <div class="interspaceH"></div>
        <el-steps :active="active" finish-status="success">
            <el-step title="创建活动"></el-step>
            <el-step title="规则奖品设置"></el-step>
            <el-step title="引流成员"></el-step>
            <el-step title="高级设置"></el-step>
        </el-steps>
        <div class="interspaceH"></div>
        <!--创建活动开始-->
        <div v-if="active==0">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称:" prop="name">
                    <el-input style="width: 400px" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="活动时间" required>
                    <el-date-picker
                            v-model="ruleForm.data"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动所需助力人数:" prop="renshu">
                    需要拉
                    <el-input style="width: 50px" v-model="ruleForm.renshu"></el-input>
                    人可成功领奖
                </el-form-item>
                <el-form-item label="用户防刷:" prop="fangshua">
                    限制用户
                    <el-input style="width: 50px" v-model="ruleForm.fangshua"></el-input>
                    天不能重复参加裂变活动
                </el-form-item>
                <!--活动客户标签-->
                <el-form-item label="活动客户标签:" prop="kehu">
                    <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible" v-model="inputValue"
                              ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
                              @blur="handleInputConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
                    <br/>
                    <el-tag :key="tag" v-for="tag in ruleForm.kehu" closable :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{ tag }}
                    </el-tag>
                </el-form-item>
                <!--助力裂变标签-->
                <el-form-item label="助力裂变标签:" prop="liebian">
                    <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible2" v-model="inputValue2"
                              ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm2"
                              @blur="handleInputConfirm2">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ 添加标签</el-button>
                    <br/>
                    <el-tag :key="tag" v-for="tag in ruleForm.liebian" closable :disable-transitions="false"
                            @close="handleClose2(tag)">
                        {{ tag }}
                    </el-tag>
                </el-form-item>
                <el-form-item>
                    <el-button @click="back">取消</el-button>
                    <el-button type="primary" @click="next1">下一步</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--创建活动结束-->
        <!--奖品设置开始-->
        <div v-if="active==1">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品类型">
                    <el-radio-group v-model="ruleForm.leixing">
                        <el-radio label="实物商品" value="shiwu"></el-radio>
                        <el-radio label="电子券" value="dianzi"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="奖品名称" prop="jiangpinName">
                    <el-input style="width: 220px" v-model="ruleForm.jiangpinName"></el-input>
                </el-form-item>
                <el-form-item label="奖品数量" prop="jiangpinshuliang">
                    <el-input style="width: 220px" v-model="ruleForm.jiangpinshuliang"></el-input>
                    个
                </el-form-item>
                <el-form-item label="奖品图片" prop="tupian">
                    <img style="width: 100px;height: 100px" src="@/views/masket/code/zzx_logo.png">
                </el-form-item>
                <el-form-item label="兑奖方式" prop="radio">
                    <el-radio disabled v-model="ruleForm.radio" label="选中且禁用">兑奖单自动兑换</el-radio>
                </el-form-item>
                <el-form-item label="自定义兑奖单:" prop="duijiangdan">
                    <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible3" v-model="inputValue3"
                              ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm3"
                              @blur="handleInputConfirm3">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput3">+ 添加标签</el-button>
                    <el-tag :key="tag" v-for="tag in ruleForm.duijiangdan" closable :disable-transitions="false"
                            @close="handleClose3(tag)">
                        {{ tag }}
                    </el-tag>
                </el-form-item>
            </el-form>
            <el-button @click="up1">上一步</el-button>
            <el-button @click="next1">下一步</el-button>
        </div>
        <!--奖品设置结束-->
        <!--引流成员开始-->
        <div v-if="active==2">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择企业成员" prop="qiyechengyuan">
                    <el-radio label="1" v-model="ruleForm.qiyechengyuan">全天在线</el-radio>
                    <el-radio label="2" v-model="ruleForm.qiyechengyuan">自动上下线</el-radio>
                    <br/>
                    <el-button v-if="ruleForm.qiyechengyuan == '1'" size="small" @click="add">添加企业成员</el-button>
                </el-form-item>
                <!--添加成员-->
                <el-form-item>
                    <el-tag v-if="ruleForm.qiyechengyuan == '1'" v-for="item in ruleForm.resource" :key="item.key"
                            closable style="margin-right: 5px" @close="handleClose(item)">
                        {{ item.label }}
                    </el-tag>
                </el-form-item>
                <el-form-item v-if="ruleForm.qiyechengyuan == '2'">
                    <!--卡片-->
                    <el-card class="box-card" style="width: 500px">
                        <el-form>
                            <el-form-item label="员工选择">
                                <el-button type="small" @click="add">+ 添加员工</el-button>
                                <el-tag v-for="item in ruleForm.resource" :key="item.key" closable
                                        style="margin-right: 5px" @close="handleClose(item)">
                                    {{ item.label }}
                                </el-tag>
                            </el-form-item>
                            <el-form-item label="工作周期">
                                <el-select v-model="values" multiple placeholder="请选择">
                                    <el-option label="周期1" value="1">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="上线时间">
                                <el-time-picker
                                        is-range
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        placeholder="选择时间范围">
                                </el-time-picker>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <!--卡片结束-->
                    <el-button type="text">添加其他工作周期</el-button>
                </el-form-item>

                <el-form-item label="企业成员添加微信上限" prop="shangxian">
                    <el-switch v-model="ruleForm.shangxian"></el-switch>
                </el-form-item>
                  <div class="m-alert" v-if="ruleForm.shangxian == true">
                    <span class="el-icon-info"></span>
                    <div>
                      <div>员工添加上限：员工从该渠道添加的客户达到每日上限后，将自动下线当日不再接待该渠道新客户。</div>
                    </div>
                  </div>
                <el-form-item label="选择企业备用人员" prop="beiyong">
                    <el-button size="small" @click="add">+ 添加企业成员</el-button>
                    <el-form-item>
                        <el-tag v-for="item in ruleForm.resource" :key="item.key" closable style="margin-right: 5px"
                                @close="handleClose(item)">
                            {{ item.label }}
                        </el-tag>
                    </el-form-item>
                </el-form-item>
                <div>
                    <!--员工添加-->
                    <el-dialog :title="titles" :visible.sync="closeDialog" width="26.5%">
                        <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="resourceArr"
                                     :data="resource"
                                     @left-check-change="leftChange" @right-check-change="rightChange"></el-transfer>
                        <br/>
                        <el-row>
                            <el-col :span="7" :offset="17">
                                <el-button size="small" @click="quxiao">取消</el-button>
                                <el-button size="small" type="primary" @click="peoples">提交</el-button>
                            </el-col>
                        </el-row>
                    </el-dialog>
                </div>

            </el-form>
            <el-button @click="up2">上一步</el-button>
            <el-button @click="next1">下一步</el-button>
        </div>
        <!--引流成员结束-->
        <!--高级设置开始-->
        <div v-if="active==3">
            <el-row>
                <el-col :span="12">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="海报裂变">
                            <el-radio-group v-model="ruleForm.haibao">
                                <el-radio label="默认"></el-radio>
                                <el-radio label="自定义"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="海报设置">
                            <el-checkbox-group v-model="ruleForm.shezhi">
                                <el-checkbox label="用户头像" name="shezhi"></el-checkbox>
                                <el-checkbox label="用户昵称" name="shezhi"></el-checkbox>
                            </el-checkbox-group>
                          <div class="m-alert">
                            <span class="el-icon-info"></span>
                            <div>
                              <div>裂变海报设计须知：</div>
                              <div>1、尺寸：720*1280px，分辨率72；</div>
                              <div>2、用户头像、用户昵称 裂变带参二维码 这三个元素需要空出；</div>
                              <div>3、裂变海报其他部分皆可自定义设计；</div>
                              <div>4、裂变海报大小不超过2M</div>
                            </div>
                          </div>
                        </el-form-item>
                        <el-form-item label="活动详情" prop="xiangqing">
                            <el-input style="width: 450px" type="textarea" v-model="ruleForm.xiangqing"></el-input>
                        </el-form-item>
                        <el-form-item label="欢迎语" prop="huanyingyu">
                            <div style="display: flex;flex-direction: column">
                                <el-button type="text"
                                           style="width: 450px;border: 1px solid #DCDFE6;display: flex;justify-content: start">
                                    &nbsp;[插入客户昵称]
                                </el-button>
                                <el-input style="width: 450px" type="textarea" v-model="ruleForm.huanyingyu"/>
                            </div>
                        </el-form-item>
                        <el-form-item label="标题" prop="biaoti">
                            <el-input style="width: 450px" v-model="ruleForm.biaoti"></el-input>
                        </el-form-item>
                        <el-form-item label="摘要" prop="zhaiyao">
                            <el-input style="width: 450px" type="textarea" v-model="ruleForm.zhaiyao"></el-input>
                        </el-form-item>
                        <el-form-item label="封面" prop="fengmian">
                            <img style="width: 150px;height:250px" src="@/views/masket/code/zzx_logo.png">
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <iframe src="http://wx.zzxapps.com/pages/preview/show/liebian" frameborder="0" style="width: 300px;height: 560px;"></iframe>
                    <br><br>
                    <iframe src="http://wx.zzxapps.com/pages/preview/show/liebian2" frameborder="0" style="width: 300px;height: 560px;"></iframe>
                </el-col>
            </el-row>
            <el-button @click="up3">上一步</el-button>
            <el-button @click="submit">创建裂变活动</el-button>
        </div>
        <!--高级设置结束-->

    </div>
</template>

<script>
export default {
    name: "add",
    data() {
        return {
            active: 0,
            ruleForm: {
//1
                name: '',
                data: '',
                renshu: '',
                fangshua: '',
                kehu: [],
                liebian: [],
//2
                leixing: '',
                jiangpinName: '',
                jiangpinshuliang: '',
                tupian: '',
                radio: '1',
                duijiangdan: [],
                beiyong: [],
                resource: [],
//3
                qiyechengyuan: [],
                shangxian: false,
                people: [],
//4
                haibao: '',
                shezhi: [],
                xiangqing: '',
                huanyingyu: '',
                biaoti: '',
                zhaiyao: '',

            },
            closeDialog: false,
            titles: '添加成员',
            values: [],
            resource: [{"key": 1, "label": "员工1", "disabled": false},
                {"key": 2, "label": "员工2", "disabled": false}, {"key": 3, "label": "员工3", "disabled": false},
                {"key": 4, "label": "员工4", "disabled": false}, {"key": 5, "label": "员工5", "disabled": false},
                {"key": 6, "label": "员工6", "disabled": false}, {"key": 7, "label": "员工7", "disabled": false},
                {"key": 8, "label": "员工8", "disabled": false}, {"key": 9, "label": "员工9", "disabled": false}],
            resourceArr: [],


            url: '@/views/masket/code/zzx_logo.png',

            data: [],
            rules: {
                name: [{required: true, message: '请输入活动名称', trigger: 'blur'}, {
                    min: 3,
                    max: 5,
                    message: '长度在 3 到 20 个字符',
                    trigger: 'blur'
                }],
                data: [{required: true, message: '请选择活动时间', trigger: 'change'}],
                renshu: [{required: true, message: '请输入助力人数', trigger: 'blur'}],
                fangshua: [{required: true, message: '请输入限制用户天数', blur: 'blur'}],
            },

            //标签
            inputVisible: false,
            inputVisible2: false,
            inputVisible3: false,
            inputValue: '',
            inputValue2: '',
            inputValue3: '',
        };
    },
    methods: {
        /*创建活动开始*/
        //活动客户标签开始
        handleClose(tag) {
            this.ruleForm.kehu.splice(this.ruleForm.kehu.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.ruleForm.kehu.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        //活动客户标签结束
        //助力裂变标签开始
        handleClose2(tag) {
            this.ruleForm.liebian.splice(this.ruleForm.liebian.indexOf(tag), 1);
        },
        showInput2() {
            this.inputVisible2 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm2() {
            let inputValue2 = this.inputValue2;
            if (inputValue2) {
                this.ruleForm.liebian.push(inputValue2);
            }
            this.inputVisible2 = false;
            this.inputValue2 = '';
        },
        //助力裂变标签结束
        /*创建活动结束*/
        /*奖品设置开始*/
        //助力裂变标签开始
        handleClose3(tag) {
            this.ruleForm.duijiangdan.splice(this.ruleForm.duijiangdan.indexOf(tag), 1);
        },
        showInput3() {
            this.inputVisible3 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm3() {
            let inputValue3 = this.inputValue3;
            if (inputValue3) {
                this.ruleForm.duijiangdan.push(inputValue3);
            }
            this.inputVisible3 = false;
            this.inputValue3 = '';
        },
        up1() {
            this.active = 0
        },
        /*奖品设置结束*/

        up2() {
            this.active = 1
        },

        up3() {
            this.active = 2
        },

        //3引流成员
        add() {
            this.closeDialog = true
        },
        quxiao() {
            this.closeDialog = false
        },
        leftChange(e) {
            let value = this.resourceArr
            let a = value.concat(e);
            this.resourceArr = a
        },
        rightChange(e) {
            let value = []
            this.resourceArr.map((item) => {
                if (item != e[0]) {
                    value.push(item)
                }
            })
            this.resourceArr = value;
        },
        //提交
        peoples() {
            let arr = this.resourceArr
            let resource = this.resource
            let result = []
            arr.map((value, index, array) => {
                resource.map((item) => {
                    if (item.key == value) {
                        result.push(item)
                    }
                })
            })
            this.ruleForm.resource = result
            this.quxiao()
        },

        submit() {
            this.$message({
                message: '创建成功',
                type: 'success'
            })
            this.back()
        },

        //下一步
        next1() {
            if (this.active++ > 2) this.active = 0;
        },

        //返回
        back() {
            this.$emit("currentHandler", "list")
        },
    }
}
</script>

<style scoped>

</style>
